<template>
	<div>
		<el-card class="box-card">
			<el-form class="user-search">
				<el-form-item>
					<el-button size="small" type="primary" icon="el-icon-plus" @click="handleInsert"
						round>添加</el-button>
					<!-- <el-button size="small" type="primary" @click="handleunit()">部门设置</el-button> -->
				</el-form-item>
			</el-form>
		</el-card>
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="text" align="center" label="名称" width="180">
			</el-table-column>
			<el-table-column prop="type" align="center" label="图标" width="180">
				<template slot-scope="scope">
					<Icon :size="scope.row.size" :type="scope.row.type" />
				</template>
			</el-table-column>
			<el-table-column prop="name" align="center" label="路径">
			</el-table-column>
			<el-table-column prop="hidden" align="center" label="是否隐藏">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.hidden" active-color="#13ce66" inactive-color="#ff4949" disabled>
					</el-switch>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button v-if="!scope.row.parentId" size="small" type="primary" icon="el-icon-plus" @click="parentleInsert(scope.row)"
						round>添加</el-button>
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"
						round>编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"
						round>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div>

			<!-- 用户导入对话框 -->
			<el-dialog :visible.sync="iustatus">
				<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
					<el-form-item label="名称" prop="text">
						<el-input v-model="form.text"></el-input>
					</el-form-item>
					<el-form-item label="路径" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="是否隐藏" prop="hidden">
						<el-switch v-model="form.hidden" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</el-form-item>
					<el-form-item label="图标" width="300">
						<el-popover placement="bottom-start" width="460" trigger="click"
							@show="$refs['iconSelect'].reset()">
							<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.type" />
							<el-input slot="reference" v-model="form.type" placeholder="点击选择图标" readonly>
								<template slot="append">
									<Icon :type="form.type" />
								</template>
							</el-input>
						</el-popover>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		getMenu,
		insert,
		deleteIds,
		update
	} from '@/api/system/menu';
	import IconSelect from "@/components/IconSelect";

	export default {
		components: {
			IconSelect
		},
		data() {
			return {
				iustatus: false,
				title:  '',
				upstatus: false,
				tableData: [],
				tableParams: {
					name: "",
					code: ""
				},
				form: {
					type: '',
					hidden: false
				},
				model: '',
				rules: {
					text: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					hidden: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				},
				id:0,
				parentStaus:false
			}
		},
		created() {
			this.getDatailist();
		},
		methods: {
			//父级菜单添加
			parentleInsert(row) {
				this.form.parentId = row.id; // 在打开对话框前设置 parentId
				this.iustatus = true;
				this.title = "添加";
				console.log(this.form.parentId)
			},
			//删除
			handleDelete(row) {
				var a="此操作将永久删除, 是否继续?";
				if(!row.parentId){
					a= "此操作将永久删除包含子权限, 是否继续?"
				}
				this.$confirm(a, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteIds(row.id)
						.then((res) => {
							if (res.code == 200) {
								this.getDatailist();
							} else {
								this.logining = false
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//icon选择
			selected(name) {
				this.$set(this.form, 'type', name);
			},
			//头部添加
			handleInsert() {
				this.iustatus = true;
				this.title = "添加";
				this.form = {};

			},
			//查询
			search() {
				this.getDatailist();
			},
			//编辑
			handleEdit(row) {
				this.iustatus = true;
				this.upstatus = true;
				this.title = "修改";
				this.form = row;
				this.$set(this.form, 'icon', row.type);
			},

			//查询
			getDatailist() {
				getMenu()
					.then((res) => {
						if (res.code == 200) {
							this.tableData = res.data
						} else {
							this.logining = false
						}
					})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},

			//添加修改
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.form.hidden == true) {
							this.form.hidden = 1
						} else {
							this.form.hidden = 0
						}
						if (this.upstatus) {
							update(this.form)
								.then((res) => {
									if (res.code == 200) {
										this.getDatailist();
										this.iustatus = false;
										this.form = {}
									} else {
										this.getDatailist();
										this.iustatus = false;
										this.form = {}
									}
								})
							this.iustatus = false;
							this.upstatus = false;
						} else {
							insert(this.form)
								.then((res) => {
									if (res.code == 200) {
										this.getDatailist();
										this.iustatus = false;
										this.form = {}
									} else {}
								})


						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		},
	}
</script>

<style>
	.fas {
		font-size: 1em;
	}
</style>